<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">

	<title>IllustratedMessage</title>

	<script>// delete Document.prototype.adoptedStyleSheets</script>

	<script src="%VITE_BUNDLE_PATH%" type="module"></script>

	<link rel="stylesheet" type="text/css" href="./styles/IllustratedMessage.css">
</head>

<body class="illustratedmessage1auto">
	Illustration:
	<ui5-select id="illustrationSelect">
		<ui5-option>Achievement</ui5-option>
		<ui5-option>AddingColumns</ui5-option>
		<ui5-option>AddPeopleToCalendar</ui5-option>
		<ui5-option>AddColumn</ui5-option>
		<ui5-option>AddPeople</ui5-option>
		<ui5-option>AddDimensions</ui5-option>
		<ui5-option>BalloonSky</ui5-option>
		<ui5-option>BeforeSearch</ui5-option>
		<ui5-option>DragFilesToUpload</ui5-option>
		<ui5-option>FilteringColumns</ui5-option>
		<ui5-option>GroupingColumns</ui5-option>
		<ui5-option>Connection</ui5-option>
		<ui5-option>EmptyCalendar</ui5-option>
		<ui5-option>EmptyList</ui5-option>
		<ui5-option>EmptyPlanningCalendar</ui5-option>
		<ui5-option>ErrorScreen</ui5-option>
		<ui5-option>FilterTable</ui5-option>
		<ui5-option>GroupTable</ui5-option>
		<ui5-option>KeyTask</ui5-option>
		<ui5-option>NoChartData</ui5-option>
		<ui5-option>NewMail</ui5-option>
		<ui5-option>NoActivities</ui5-option>
		<ui5-option>NoColumnsSet</ui5-option>
		<ui5-option>NoData</ui5-option>
		<ui5-option>NoEntries</ui5-option>
		<ui5-option>NoFilterResults</ui5-option>
		<ui5-option>NoMail_v1</ui5-option>
		<ui5-option>NoMail</ui5-option>
		<ui5-option>NoNotifications</ui5-option>
		<ui5-option>NoSavedItems_v1</ui5-option>
		<ui5-option>NoSavedItems</ui5-option>
		<ui5-option>NoSearchResults</ui5-option>
		<ui5-option>NoTasks_v1</ui5-option>
		<ui5-option>NoTasks</ui5-option>
		<ui5-option>NoDimensionsSet</ui5-option>
		<ui5-option>PageNotFound</ui5-option>
		<ui5-option>ReloadScreen</ui5-option>
		<ui5-option>ResizeColumn</ui5-option>
		<ui5-option>ResizingColumns</ui5-option>
		<ui5-option>ReceiveAppreciation</ui5-option>
		<ui5-option>SearchEarth</ui5-option>
		<ui5-option>SearchFolder</ui5-option>
		<ui5-option>SignOut</ui5-option>
		<ui5-option>SimpleBalloon</ui5-option>
		<ui5-option>SimpleBell</ui5-option>
		<ui5-option>SimpleCalendar</ui5-option>
		<ui5-option>SimpleCheckMark</ui5-option>
		<ui5-option>SimpleConnection</ui5-option>
		<ui5-option>SimpleEmptyDoc</ui5-option>
		<ui5-option>SimpleEmptyList</ui5-option>
		<ui5-option>SimpleError</ui5-option>
		<ui5-option>SimpleMagnifier</ui5-option>
		<ui5-option>SimpleMail</ui5-option>
		<ui5-option>SimpleNoSavedItems</ui5-option>
		<ui5-option>SimpleNotFoundMagnifier</ui5-option>
		<ui5-option>SimpleReload</ui5-option>
		<ui5-option>SimpleTask</ui5-option>
		<ui5-option>SleepingBell</ui5-option>
		<ui5-option>SortColumn</ui5-option>
		<ui5-option>SortingColumns</ui5-option>
		<ui5-option>SuccessBalloon</ui5-option>
		<ui5-option>SuccessCheckMark</ui5-option>
		<ui5-option>SuccessHighFive</ui5-option>
		<ui5-option>SuccessScreen</ui5-option>
		<ui5-option>Survey</ui5-option>
		<ui5-option>Tent</ui5-option>
		<ui5-option>UnableToLoad</ui5-option>
		<ui5-option>UnableToLoadImage</ui5-option>
		<ui5-option>UnableToUpload</ui5-option>
		<ui5-option>UploadToCloud</ui5-option>
		<ui5-option>UploadCollection</ui5-option>
		<ui5-option>UserHasSignedUp</ui5-option>
		<ui5-option>TntAvatar</ui5-option>
		<ui5-option>TntCalculator</ui5-option>
		<ui5-option>TntChartArea</ui5-option>
		<ui5-option>TntChartArea2</ui5-option>
		<ui5-option>TntChartBar</ui5-option>
		<ui5-option>TntChartBPMNFlow</ui5-option>
		<ui5-option>TntChartBullet</ui5-option>
		<ui5-option>TntChartDoughnut</ui5-option>
		<ui5-option>TntChartFlow</ui5-option>
		<ui5-option>TntChartGantt</ui5-option>
		<ui5-option>TntChartOrg</ui5-option>
		<ui5-option>TntChartPie</ui5-option>
		<ui5-option>TntCodePlaceholder</ui5-option>
		<ui5-option>TntCompany</ui5-option>
		<ui5-option>TntCompass</ui5-option>
		<ui5-option>TntComponents</ui5-option>
		<ui5-option>TntDialog</ui5-option>
		<ui5-option>TntEmptyContentPane</ui5-option>
		<ui5-option>TntExternalLink</ui5-option>
		<ui5-option>TntFaceID</ui5-option>
		<ui5-option>TntFingerprint</ui5-option>
		<ui5-option>TntHandshake</ui5-option>
		<ui5-option>TntHelp</ui5-option>
		<ui5-option>TntLock</ui5-option>
		<ui5-option>TntMission</ui5-option>
		<ui5-option>TntMissionFailed</ui5-option>
		<ui5-option>TntNoApplications</ui5-option>
		<ui5-option>TntNoFlows</ui5-option>
		<ui5-option>TntNoUsers</ui5-option>
		<ui5-option>TntRadar</ui5-option>
		<ui5-option>TntRoadMap</ui5-option>
		<ui5-option>TntSecrets</ui5-option>
		<ui5-option>TntServices</ui5-option>
		<ui5-option>TntSessionExpired</ui5-option>
		<ui5-option>TntSessionExpiring</ui5-option>
		<ui5-option>TntSettings</ui5-option>
		<ui5-option>TntSuccess</ui5-option>
		<ui5-option>TntSuccessfulAuth</ui5-option>
		<ui5-option>TntSystems</ui5-option>
		<ui5-option>TntTeams</ui5-option>
		<ui5-option>TntTools</ui5-option>
		<ui5-option>TntTutorials</ui5-option>
		<ui5-option>TntUnableToLoad</ui5-option>
		<ui5-option>TntUnlock</ui5-option>
		<ui5-option>TntUnsuccessfulAuth</ui5-option>
		<ui5-option>TntUser2</ui5-option>
	</ui5-select>
	Designs:
	<ui5-select id="sizeSelect">
		<ui5-option>base</ui5-option>
		<ui5-option>extrasmall</ui5-option>
		<ui5-option>small</ui5-option>
		<ui5-option>medium</ui5-option>
		<ui5-option selected>large</ui5-option>
	</ui5-select>
	<ui5-illustrated-message id="illustratedMsg1" class="border">
		<ui5-button>Action 1</ui5-button>
	</ui5-illustrated-message>

	<ui5-button id="openDialogButton">Open Dialog</ui5-button>

	<ui5-dialog id="hello-dialog" header-text="Error" resizable>
		<ui5-illustrated-message name="UnableToLoad"></ui5-illustrated-message>
		<ui5-bar design="Footer" slot="footer">
			<ui5-button id="closeDialogButton" design="Emphasized" slot="endContent">Close</ui5-button>
		</ui5-bar>
	</ui5-dialog>

	<ui5-illustrated-message id="illustratedMsg2" name="UnableToUpload" title="Something went wrong..." accessible-name-ref="lbl">
		<div slot="subtitle">Please try again or contact us at <ui5-link>example@example.com</ui5-link> <br><label id="lbl">Text from aria-labelledby</label></div>
		<ui5-button icon="refresh">Try again</ui5-button>
	</ui5-illustrated-message>

	<ui5-illustrated-message id="illustratedMsg3" name="UnableToUpload">
		<ui5-title slot="title" level="H1">This is a slotted title</ui5-title>
	</ui5-illustrated-message>

	<ui5-panel id="panel1" accessible-role="Complementary" no-animation>

		<!-- Panel header -->
		<div slot="header" class="header">
			<ui5-title id="p1-title">Expandable panel title</ui5-title>
		</div>

        <ui5-illustrated-message
          name="AddColumn"
          titleText="No milestones yet."
		  id="illustratedMsg4"
        ></ui5-illustrated-message>
    </ui5-panel>

	<h2>Vertical responsiveness</h2>
	Container height:
	<ui5-select id="containerHeightSelect">
		<ui5-option selected>auto</ui5-option>
		<ui5-option>200px</ui5-option>
		<ui5-option>300px</ui5-option>
		<ui5-option>500px</ui5-option>
		<ui5-option>700px</ui5-option>
	</ui5-select>
	Container width:
	<ui5-select id="containerWidthSelect">
		<ui5-option selected>auto</ui5-option>
		<ui5-option>100%</ui5-option>
		<ui5-option>200px</ui5-option>
		<ui5-option>300px</ui5-option>
		<ui5-option>500px</ui5-option>
		<ui5-option>700px</ui5-option>
	</ui5-select>
	<div id="container" class="border">
		<ui5-illustrated-message id="illustratedMsg5" class="border contentBox">
			<ui5-button>Action 1</ui5-button>
		</ui5-illustrated-message>
	</div>

	<script>
		const illustrationSelect = document.getElementById("illustrationSelect");
		const sizeSelect = document.getElementById("sizeSelect");
		const illustratedMessage = document.querySelector("ui5-illustrated-message");
		const dialogOpener = document.getElementById("openDialogButton");
		const dialog = document.getElementById("hello-dialog");
		const dialogCloser = document.getElementById("closeDialogButton");
		const containerHeightSelect = document.getElementById("containerHeightSelect");
		const containerWidthSelect = document.getElementById("containerWidthSelect");
		const illustratedMessageContainer = document.getElementById("container");
		const designs = {
			base: 159,
			extrasmall: 259,
			small: 319,
			medium: 679,
			large: 1100,
		}

		illustratedMessage.style.width = `${designs.large}px`;

		illustrationSelect.addEventListener("ui5-change", (event) => {
			illustratedMessage.setAttribute("name", event.detail.selectedOption.textContent);
		});

		sizeSelect.addEventListener("ui5-change", (event) => {
			illustratedMessage.style.width = `${designs[event.detail.selectedOption.textContent]}px`;
		});

		dialogOpener.addEventListener("click", () => {
			dialog.open = true;
		});

		dialogCloser.addEventListener("click", () => {
			dialog.open = false;
		});

		containerHeightSelect.addEventListener("ui5-change", (event) => {
			illustratedMessageContainer.style.height = event.detail.selectedOption.textContent;
		});

		containerWidthSelect.addEventListener("ui5-change", (event) => {
			illustratedMessageContainer.style.width = event.detail.selectedOption.textContent;
		});
	</script>
</body>

</html>
